import { getResume } from '@/lib'

export default async function ResumePage() {
  const resume = await getResume()
  if (!resume) {
    return null
  }
  console.log("getResume",getResume)
  return (
    <main className="min-h-screen p-4 md:p-8">
      <div className="max-w-4xl mx-auto">
        <article className="bg-white dark:bg-gray-800 rounded-lg shadow p-8">
          {/* 基本信息 */}
          <header className="mb-12 text-center">
            <h1 className="text-4xl font-bold mb-4 dark:text-white">张三</h1>
            <div className="text-lg text-gray-600 dark:text-gray-300 mb-4">
              全栈开发工程师
            </div>
            <div className="flex justify-center gap-4 text-gray-600 dark:text-gray-300">
              <span>📧 your.email@example.com</span>
              <span>📱 +86 123 4567 8900</span>
            </div>
          </header>

          {/* 个人简介 */}
          <section className="mb-12">
            <h2 className="text-2xl font-bold mb-4 dark:text-white">个人简介</h2>
            <p className="text-gray-600 dark:text-gray-300">
              5年全栈开发经验，专注于 Web 应用开发，熟悉前后端技术栈，有丰富的项目经验。
              热爱技术，持续学习，善于解决问题。
            </p>
          </section>

          {/* 技能专长 */}
          <section className="mb-12">
            <h2 className="text-2xl font-bold mb-4 dark:text-white">技能专长</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h3 className="text-lg font-semibold mb-2 dark:text-white">前端开发</h3>
                <ul className="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
                  <li>React, Vue, Next.js, Nuxt.js</li>
                  <li>TypeScript, JavaScript</li>
                  <li>HTML5, CSS3, Sass</li>
                  <li>Tailwind CSS, Material-UI</li>
                </ul>
              </div>
              <div>
                <h3 className="text-lg font-semibold mb-2 dark:text-white">后端开发</h3>
                <ul className="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
                  <li>Node.js, Express, NestJS</li>
                  <li>Python, Django, Flask</li>
                  <li>MySQL, MongoDB, Redis</li>
                  <li>Docker, Kubernetes</li>
                </ul>
              </div>
            </div>
          </section>

          {/* 工作经历 */}
          <section className="mb-12">
            <h2 className="text-2xl font-bold mb-4 dark:text-white">工作经历</h2>
            <div className="space-y-8">
              <div>
                <h3 className="text-lg font-semibold dark:text-white">高级全栈开发工程师</h3>
                <div className="text-gray-600 dark:text-gray-300 mb-2">
                  ABC科技有限公司 | 2020年6月 - 至今
                </div>
                <ul className="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
                  <li>负责公司核心产品的前端架构设计和开发</li>
                  <li>优化前端性能，提升用户体验</li>
                  <li>指导初级开发人员，组织技术分享</li>
                </ul>
              </div>
              <div>
                <h3 className="text-lg font-semibold dark:text-white">Web 开发工程师</h3>
                <div className="text-gray-600 dark:text-gray-300 mb-2">
                  XYZ公司 | 2018年3月 - 2020年5月
                </div>
                <ul className="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
                  <li>参与多个 Web 应用项目的开发</li>
                  <li>负责项目的技术选型和架构设计</li>
                  <li>与产品经理密切合作，优化产品功能</li>
                </ul>
              </div>
            </div>
          </section>

          {/* 教育背景 */}
          <section className="mb-12">
            <h2 className="text-2xl font-bold mb-4 dark:text-white">教育背景</h2>
            <div>
              <h3 className="text-lg font-semibold dark:text-white">计算机科学与技术</h3>
              <div className="text-gray-600 dark:text-gray-300">
                某某大学 | 本科 | 2014年9月 - 2018年6月
              </div>
            </div>
          </section>

          {/* 项目经历 */}
          <section>
            <h2 className="text-2xl font-bold mb-4 dark:text-white">项目经历</h2>
            <div className="space-y-6">
              <div>
                <h3 className="text-lg font-semibold dark:text-white">企业管理系统</h3>
                <div className="text-gray-600 dark:text-gray-300 mb-2">
                  技术栈：React, TypeScript, Node.js, MongoDB
                </div>
                <ul className="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
                  <li>负责系统架构设计和核心功能开发</li>
                  <li>实现了复杂的数据可视化功能</li>
                  <li>优化系统性能，提升加载速度50%</li>
                </ul>
              </div>
              <div>
                <h3 className="text-lg font-semibold dark:text-white">电商平台</h3>
                <div className="text-gray-600 dark:text-gray-300 mb-2">
                  技术栈：Vue.js, Python, MySQL
                </div>
                <ul className="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
                  <li>开发订单管理和库存系统</li>
                  <li>实现支付系统集成</li>
                  <li>设计并实现商品推荐算法</li>
                </ul>
              </div>
            </div>
          </section>
        </article>
      </div>
    </main>
  )
} 